<template>
	<div class="player">
		<div class="song-info">
			<h3>{{ currentSong.title }}</h3>
			<p>{{ currentSong.artist }}</p>
		</div>
		
		<div class="controls">
			<button @click="prev">上一首</button>
			<button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
			<button @click="next">下一首</button>
		</div>
		    <!-- 进度条 -->
		<div class="progress-bar" ref="progressBar" @click="seek">
			<div class="progress" :style="{ width: progress + '%' }"></div>
		</div>
		<!-- 时间显示 -->
		<div class="time">
			{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
		</div>
		<!-- 音量控制 -->
	    <div class="volume-control">
			<input 
		        type="range" 
		        min="0" 
		        max="1" 
		        step="0.1" 
		        v-model="volume" 
		        @input="setVolume"
		    >
		    <span>{{ Math.round(volume * 100) }}%</span>
		</div>
	</div>
</template>
<script>
	import { Howl,Howler } from 'howler'
	export default{
		name: 'music',
		data() {
			return{
				howl: null,
				isPlaying: false,
				currentTime: 0,
				duration: 0,
				progress: 0,
				raf: null,
				volume: 1,
				currentSongIndex: 0,
				songs: [
			        {
						title: '【爱尔兰】Last Rebel',
						artist: '@B站 度娘你要闹哪样',
						src: ['/度娘你要闹哪样 - 【爱尔兰】Last Rebel.mp3']  // 替换实际路径
					},
				    {
						title: '【阿富汗】群青',
						artist: '@B站 度娘你要闹哪样',
						src: ['/度娘你要闹哪样,赤羽 - 【阿富汗】群青.mp3']  // 替换实际路径
				    }
				]
			}
		},
		computed: {
		    currentSong() {
				return this.songs[this.currentSongIndex] || {}
		    }
		},
		methods: {
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60)
				const remainingSeconds = Math.floor(seconds % 60)
				return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
			},
		    // 初始化歌曲加载‌:ml-citation{ref="3" data="citationList"}
		    loadSong() {
		      if (this.howl) {
		        this.howl.unload()
		      }
		
		      this.howl = new Howl({
		        src: this.currentSong.src,
		        html5: true,
		        volume: this.volume,
		        onplay: () => {
		          this.isPlaying = true
		          this.requestAnimationFrame()
		        },
		        onpause: () => {
		          this.isPlaying = false
		          cancelAnimationFrame(this.raf)
		        },
		        onend: () => {
		          this.next()  // 自动播放下一首‌:ml-citation{ref="8" data="citationList"}
		        },
		        onload: () => {
		          this.duration = this.howl.duration()
		        }
		      })
		    },
		
		    // 播放/暂停控制‌:ml-citation{ref="1" data="citationList"}
		    togglePlay() {
		      if (!this.howl) return
		      this.howl.playing() ? this.howl.pause() : this.howl.play()
		    },
		
		    // 上一首‌:ml-citation{ref="8" data="citationList"}
		    prev() {
				this.currentSongIndex = 
					(this.currentSongIndex - 1 + this.songs.length) % this.songs.length
					this.loadSong()
				if (this.isPlaying) this.howl.play()
		    },
		
		    // 下一首‌:ml-citation{ref="8" data="citationList"}
		    next() {
				this.currentSongIndex = (this.currentSongIndex + 1) % this.songs.length
				this.loadSong()
				if (this.isPlaying) this.howl.play()
		    },
		
		    // 音量控制‌:ml-citation{ref="6" data="citationList"}
		    setVolume() {
				if (this.howl) {
					this.howl.volume(this.volume)
				}
		    },
		
		    // 进度条更新（原有逻辑保留）‌:ml-citation{ref="1,7" data="citationList"}
		    requestAnimationFrame() {
				const update = () => {
		        if (this.howl) {
					this.currentTime = this.howl.seek() || 0
					this.progress = (this.currentTime / this.duration) * 100
					}
					this.raf = requestAnimationFrame(update)
				}
				this.raf = requestAnimationFrame(update)
		    }
		},
		mounted() {
			this.loadSong()
			
		},
		beforeUnmount() {
			if(this.howl){
				this.howl.unload()
			}
		}
	}
</script>

<style>
</style>